<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="/common/mytags.jsp" %>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统菜单列表</title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>common/frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>backstage/css/common.css" media="all">
     <style type="text/css">

         input {
             height: 38px;
             padding: 0 7px;
             border: 1px solid #ccc;
         }

         input:focus {
             border-color: #009E94;
         }

         /** 未展开 */
         .treeTable-icon .layui-icon-layer:before {
             content: "\e638";
         }

         /** 展开 */
         .treeTable-icon.open .layui-icon-layer:before {
             content: "\e638";
         }
         .treeTable-icon .layui-icon-file:before {
             content: "\e621";
         }
         /** 未展开 */
         .treeTable-icon .layui-icon-triangle-d:before {
             content: "\e623";
         }
         /** 展开 */
         .treeTable-icon.open .layui-icon-triangle-d:before {
             content: "\e625";
         }

    </style>
</head>
<body>
<div class="layui-fluid larry-wrapper" style="width: 95%">
    <blockquote class="layui-elem-quote larry-btn" style="height: 35px;">
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn" id="btn-fold">全部折叠</button>
            </div>
            &nbsp;&nbsp;
            <input id="edt-search" type="text" placeholder="输入关键字" style="width: 120px;"/>&nbsp;&nbsp;
            <button class="layui-btn" id="btn-search">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>
            <div class="layui-input-inline">
                <label class="layui-form-label">属性</label>
                <div class="layui-input-block"  style="width: 100px;">
                    <select name="attribute" id="attribute" class="layui-input layui-select">
                        <c:forEach items="${requestScope.attribute}" var="a">
                            <option value="${a.value}">${a.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <a class="layui-btn" data-type="getSelect" id="getSelect" >查询</a>
            <authority:auto target="CREATE_AUTH_MENU" >
                <button class="layui-btn layui-btn-danger" style="display: none"  id="insert_menu">&nbsp;&nbsp;新增目录&nbsp;&nbsp;</button>
            </authority:auto>
    </blockquote>

    <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>
<!-- 操作列 -->
<script type="text/html" id="oper-col">
    <authority:auto target="CREATE_AUTH_MENU" >
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit" style="">修改</a>
    <a class="layui-btn  layui-btn-warm layui-btn-xs " lay-event="add"  style="">新增</a>
    </authority:auto>
    <authority:auto target="DELETE_AUTH_MENU" >
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </authority:auto>

</script>


<script type="text/javascript">
    layui.config({
        base:"<%=basePath%>common/larrylib/",
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var e = layui.$;
        var table =  layui.table;
        var t = layui.layer;
        var treetable = layui.treetable;
        var width = $(document).width();
        var height = $(document).height();
        enter("getSelect");
        // 渲染表格
        var renderTable = function(){
            layer.load(2);
            treetable.render({
                id: 'auth-table',
                treeColIndex: 2,
                treeSpid: '-1',
                treeIdName: 'authorityId',
                treePidName: 'parentId',
                elem: '#auth-table',
                url: '<%=basePath%>auth/menu/list?attribute='+$("#attribute").val(),
                page: false,
                cols: [[
                    {field: 'num', title: '序号',align: "center", width: width * 0.07},
                    {field: 'icon', title: '图标',align: "center", width: width * 0.07},
                    {field: 'name', title: '菜单名称', width: width * 0.18},
                    {field: 'url', title: '菜单URL地址', width: width * 0.22},
                    {field: 'code', title: '菜单权限代码', width: width * 0.16},
                    {
                        field: 'type', width: width* 0.06, align: 'center', templet: function (d) {
                            if (d.type == 0) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>&nbsp;';
                            }
                            if (d.type == 1) {
                                return '<span class="layui-badge-rim">菜单</span>&nbsp;';
                            }
                            if (d.type == 2) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>&nbsp;';
                            }
                        }, title: '类型'
                    },
                    {templet: '#oper-col', title: '常用操作',align: "center", width: width * 0.13}
                ]],
                done: function ( res,curr,count) {
                    //console.log(res);
                    //console.log(curr);
                    //console.log(count);
                    count<=0?$("#insert_menu").show():$("#insert_menu").hide();
                    layer.closeAll('loading');
                }
            });
        };

        <authority:auto target="AUTH_MENU_PAGE" >
            renderTable();
        </authority:auto>


        $('#btn-expand').click(function () {
            treetable.expandAll('#auth-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#auth-table');
        });

        $('#btn-search').click(function () {
            var keyword = $('#edt-search').val();
            var searchCount = 0;
            $('#auth-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        treetable.expandAll('#auth-table');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword == '') {
                layer.msg("请输入搜索内容", {icon: 5});
            } else if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            }
        });

        table.on("tool(auth-table)", function (e) {
            var i = e.data;
            if (e.event == "del") {
                t.confirm("该数据将被清除,确认吗？", {
                    icon: 3,
                    skin: 'larry-green',
                    title: "删除提示",
                    offset: '200px',
                    closeBtn: 0,
                    skin: 'layui-layer-molv',
                    anim: Math.ceil(Math.random() * 6),
                    btn: ['确定', '取消']
                }, function (index) {
                    $.ajax({
                        url: '<%=basePath%>auth/menu/delete',
                        type: 'post',
                        async: false,
                        data: {menuId:i.menuId},
                        dataType: "json",
                        success: function (data) {
                            if (data.state == 200) {
                                t.msg(data.message, {icon: 6});
                                renderTable();//刷新父页面
                                return true;
                            } else {
                                t.msg(data.message, {icon: 5});
                                return false;
                            }
                        }, error: function () {
                            top.layer.msg("系统数据处理异常！", {icon: 2});
                            return false;
                        }
                    });
                    layer.close(index);
                }, function (index) {

                    layer.close(index);
                });
            }

            if (e.event  == "edit"){
                var e = layui.layer.open({
                    title: "编辑菜单",
                    type: 2,
                    move: false,
                    anim: 1,
                    skin: "larry-green",
                    offset: '80px',
                    area: [width / 1.5 + "px", height*0.77 + "px"],
                    content: "<%=basePath%>auth/menu/toInsert?menuId="+i.menuId+"&insert=2&attribute="+$("#attribute").val()
                });
            }


            if (e.event  == "add"){
                var e = layui.layer.open({
                    title: "新增菜单",
                    type: 2,
                    move: false,
                    anim: 1,
                    skin: "larry-green",
                    offset: '80px',
                    area: [width / 1.5 + "px", height*0.77 + "px"],
                    content: "<%=basePath%>auth/menu/toInsert?menuId="+i.menuId+"&insert=1&attribute="+$("#attribute").val()
                });
            }



        });

        e("#insert_menu").on("click", function () {
            var e = layui.layer.open({
                title: "菜单信息",
                type: 2,
                move: false,
                anim: 1,
                skin: "larry-green",
                offset: '80px',
                area: [width / 1.5 + "px", height*0.77 + "px"],
                content: "<%=basePath%>auth/menu/toInsert?attribute="+$("#attribute").val()
            });
        });

        e("#getSelect").on("click", function () {
            var t = e(this).data("type");
            r[t] ? r[t].call(this) : "";
        });

        var r = {
            getSelect: function () {
                var i = t.msg("查询中，请稍候...", {icon: 16, time: false, shade: 0});
                renderTable();
                t.close(i);
            }
        };
    });
</script>


</body>
</html>